<template>
  <div class="question-answer">
    <div class="idea-name">
      {{ ideaName }}
    </div>
    <div class="question-answer-list">
      <div class="question-answer-item" v-for="item in questionList" :key="item.id">
        <div class="question-answer-title">{{ item.content }}</div>
        <div v-show="!item.isEdit" >
          <div class="question-answer-card">
            <div class="question-answer-card-header">
              <div class="avatar">
                 <a-avatar
                   size="large"
                    v-if="item.avatar && showAvatar"
                    slot="avatar"
                    :src="item.avatar"
                  />
                <div class="username">{{ item.username }}</div>
              </div>
              <a-button type="link" @click="onEdit(item)">{{ item.answer ? 'Edit' : 'answer'}}</a-button>
            </div>
            <div v-html="formatAnswer(item.answer)" class="question-answer-card-content" :style="{ paddingLeft: item.avatar && showAvatar ? '55px' : '12px'}">
            
            </div>
          </div>
        </div>
        <div v-show="item.isEdit" >
          <div class="question-answer-card-header" style="padding-left:0">
              <div class="avatar">
                 <a-avatar
                    size="large"
                    v-if="item.avatar && showAvatar"
                    slot="avatar"
                    :src="item.avatar"
                  />
                <div class="username">{{ item.username }}</div>
              </div>
            </div>
          <a-textarea style="height: 115px;margin-top: 10px" v-model="item.answerInput" placeholder="Type here what’s on your mind..."></a-textarea>
          <div class="tags-list">
            <div class="tag-name">Tags</div>
            <div class="tag-items">
              <a-tag v-for="(tag,tagIndex) in item.tagList" :key="tagIndex" closable @close="handleCloseTag(tag)">
                {{ tag }}
              </a-tag>
              <a-input
                style="width: 300px"
                v-if="item.tagInputVisible"
                ref="inputRef"
                type="text"
                size="small"
                placeholder="Press enter"
                v-model="item.tagInput"
                @blur="handleInputConfirm(item)"
                @keyup.enter="handleInputConfirm(item)"
              />
              <a-tag v-else @click="showInput(item)" style="background: #fff; border-style: dashed">
                <span>+</span>
                New Tag
              </a-tag>
            </div>
          </div>
          <div class="submit-box">
            <a-button @click="onCancel(item)">CANCEL</a-button>
            <a-button style="margin-left: 20px" type="primary" @click="onSave(item)">SAVE</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { ideaAnswer } from '@/api/api'
import { ideaAnswer } from '@/api/api'

export default {
  data () {
    return {
      questionList: [
      ],
      ideaName: '',
      showAvatar: true
    }
  },
  created () {
    this.getList()
  },
  methods: {
      formatAnswer(value) {
          if(!value) return
          return value.replaceAll('\n', '</br>')
      },
      getList () {
      ideaAnswer.read(this.$route.query.id).then(res => {
        this.ideaName = res.idea.name
        this.showAvatar = !!res.idea.anonymous
      this.questionList = res.idea.questions.map(el => {
        const findAnswer = (res.idea.answers || []).find(answer => answer.idea_question_id === el.id)
        console.log('res.idea.users', res.idea.users, res.idea.user_id)
        const findUser = (res.users || []).find(user => user.id === res.idea.user_id)
        console.log(findUser)
        return {
          ...el,
          isEdit: false,
          answerId: (findAnswer && findAnswer.id) || null,
          answer: (findAnswer && findAnswer.content) || null,
          answerInput: '',
          tagList: (findAnswer && findAnswer.tags) || [],
          tagInputVisible: false,
          tagInput: '',
          avatar: findUser?.slack_user?.profile?.image_32,
          username: findUser?.slack_user?.profile?.real_name
        }
      })
        console.log(this.questionList)
      })
    },
    onEdit (item) {
      item.isEdit = true
      item.answerInput = item.answer
    },
    addTag (item) {
      item.tagAdding = true
    },
    handleInputConfirm (item) {
      console.log('item.tagList', item.tagList)
      if (item.tagInput) {
        item.tagList.push(item.tagInput)
      }
      item.tagInputVisible = false
      item.tagInput = ''
    },
    showInput (item) {
      item.tagInputVisible = true
      item.tagInput = ''
      this.$nextTick(() => {
        console.log('this.$refs.inputRef', this.$refs.inputRef)
        this.$refs.inputRef[0].focus()
      })
    },
    handleCloseTag (tag) {
      console.log(tag)
    },
    onCancel (item) {
      item.answerInput = ''
      item.isEdit = false
    },
    onSave (item) {
      ideaAnswer.update(this.$route.query.id, {
        question_answer: {
          idea_question_id: item.id,
          content: item.answerInput,
          tags: item.tagList
        }
      }).then(res => {
        item.answer = item.answerInput
        item.answerInput = ''
        item.isEdit = false
      })
    }
  }
}
</script>
<style lang="less">
.question-answer{
  height: 100%;
  position: absolute;
  width: 100%;
  padding: 20px 36px;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: auto;
  .idea-name {
    color: #000000;
    font-size: 20px;
    line-height: 38px;
  }
}
.question-answer-list {
  .question-answer-item {
    .question-answer-title {
      height: 29px;
      font-size: 20px;
      font-family: Quicksand500, serif;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      line-height: 28px;
    }
    .question-answer-card {
      background: #FFFFFF;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #FFFFFF;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: 12px 0;
      display: flex;
      flex-direction: column;
    }
    .question-answer-card-header {
      display: flex;
      justify-content: space-between;
      padding: 8px 12px;
      .avatar {
        display: flex;
        align-items: center;
        .ant-avatar {
          margin-right: 10px;
        }
        .username {
          height: 27px;
          font-size: 20px;
          font-family: Quicksand500;
          font-weight: 500;
          color: #069697;
          line-height: 28px;
        }
      }
    }
    .question-answer-card-content {
      padding: 0 60px 39px 55px;
      font-size: 14px;
      font-family: Roboto-Regular;
      font-weight: 400;
      color: #000000;
      line-height: 20px;
    }
    .add-tags {
      font-size: 14px;
      font-family: Roboto-Bold;
      font-weight: bold;
      color: #5E6366;
      line-height: 20px;
      margin-bottom: 16px;
      cursor: pointer;
    }
    .tags-list {
      display: flex;
      align-items: center;
      margin-top: 12px;
      .tag-name {
        font-size: 14px;
        font-family: Quicksand500, serif;
        font-weight: bold;
        color: #5E6366;
        line-height: 20px;
      }
      .tag-items {
        margin-left: 20px;
      }
    }
    .submit-box {
      padding: 10px;
      text-align: right;
    }
  }
}
</style>
